﻿<template>
  <div>
    <!-- 标题部分 -->
    <V-Title :titleName = 'titleName'></V-Title>
    <div class = 'page_mainContent' v-loading = 'loading'>
      <!-- 检索部分 -->
      <div class = 'page_searchContent'>
        <el-input placeholder = "请输入事件名称或者编号进行检索" v-model = 'searchKey' prefix-icon = "el-icon-search"></el-input>
      </div>
      <!-- 表格部分 -->
      <el-form :model = 'ruleForm' :rules = 'rules' ref = 'ruleForm'>
        <div class = 'page_tableContent'>
          <el-table :data='ruleForm.tableData' style='width:100%' empty-text='暂无数据，请点击右上方按钮添加' border stripe>
            <el-table-column :render-header="handelHelpKey" label='事件编号' align='center'>
              <template slot-scope='scope'>
                <el-form-item :prop="'tableData[' + scope.$index + '].no'" :rules='rules.no'>
                  <el-input :disabled="(operationType !== 'edit' && operationType !== 'add') || (operationType === 'add' && scope.row.newData !== 'newData')"
                  v-model='scope.row.no' placeholder='请输入'></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :render-header="handelHelpKey" label='事件名称' align='center' labelClassName='事件名称不能为空且不要重复，建议采用中文字符'>
              <template slot-scope='scope'>
                <el-form-item :prop="'tableData[' + scope.$index + '].name'" :rules='rules.name'>
                  <el-input :disabled="(operationType !== 'edit' && operationType !== 'add') || (operationType === 'add' && scope.row.newData !== 'newData')"
                  v-model='scope.row.name' placeholder='请输入'></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :render-header="handelHelpKey" label='事件类型' align='center'>
              <template slot-scope='scope'>
                <el-form-item :prop="'tableData[' + scope.$index + '].type'" :rules='rules.type'>
                  <el-select :disabled="(operationType !== 'edit' && operationType !== 'add') || (operationType === 'add' && scope.row.newData !== 'newData')"
                  v-model='scope.row.type' placeholder='请选择'>
                    <el-option label='按钮事件' value="Button"></el-option>
                    <el-option label='链接事件' value="Link"></el-option>
                    <el-option label='单笔资料行按钮事件' value="RowButton"></el-option>
                    <el-option label='单笔资料行链接事件' value="RowLink"></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :render-header="handelHelpKey" label='事件触发时机' align='center'>
              <template slot-scope='scope'>
                <el-form-item :prop="'tableData[' + scope.$index + '].at'" :rules='rules.at'>
                  <el-select :disabled="(operationType !== 'edit' && operationType !== 'add') || (operationType === 'add' && scope.row.newData !== 'newData')"
                  v-model='scope.row.at' placeholder='请选择' @change='atValueChaned(scope.row.at, scope.$index)'>
                    <el-option label='在已有执行逻辑之前' value="Before"></el-option>
                    <el-option label='在已有执行逻辑之后' value="After"></el-option>
                    <el-option label='替换已有事件或全新事件' value="Replace"></el-option>
                    <el-option label='全新事件' value="New"></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label='父事件编号' align='center'>
              <template slot-scope='scope'>
                <el-form-item>
                  <el-select :disabled="scope.row.at === 'New' || (operationType !== 'edit' && operationType !== 'add') || (operationType === 'add' && scope.row.newData !== 'newData')"
                  v-model='scope.row.parent' placeholder='请选择' clearable>
                    <el-option v-for='(item, index) in parentCodeArray' :key='index'
                    :label='item.name' :value='item.no'></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label='事件描述' align='center'>
              <template slot-scope='scope'>
                <el-form-item>
                  <el-input :disabled="(operationType !== 'edit' && operationType !== 'add') || (operationType === 'add' && scope.row.newData !== 'newData')"
                  v-model='scope.row.desc' placeholder='请输入'></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label='事件参数设定' align='center'>
              <template slot-scope='scope'>
                <span class="editStatus"
                @click="(operationType !== 'edit' && (scope.row.newData !== 'newData')) ? showTableCloumn(scope.row, scope.$index) : editTableCloumn(scope.row, scope.$index)">
                  {{scope.row.request_parameters ? '......' : '请输入'}}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width='80'>
              <template slot-scope="scope">
                <el-button type='text' :disabled="operationType === 'edit' || (operationType === 'add' && scope.row.newData !== 'newData')" @click="handleSingleDelete(scope.row, scope.$index)"><i class='iconfont icon-shanchu'></i>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 底部按钮和页码部分 -->
        <div class='page_bottomContent'>
          <div class='page_btnsContent'>
            <el-form-item class='form_noLeftMargin' >
              <el-button type="primary" @click='addData()' :disabled="operationType === 'edit'">添加事件</el-button>
              <el-button type="primary" @click='editData()' :disabled="operationType === 'edit' || operationType === 'add'">编辑事件</el-button>
              <el-button type="primary" @click="resetForm ('ruleForm')" v-if="operationType === 'edit' || operationType === 'add'">取&nbsp;&nbsp;&nbsp;&nbsp;消</el-button>
              <el-button type="primary" @click="submitForm ('ruleForm', operationType)" v-if="operationType === 'edit' || operationType === 'add'">确&nbsp;&nbsp;&nbsp;&nbsp;定</el-button>
            </el-form-item>
          </div>
          <div class='page_paginationContent'>
            <el-pagination style='text-align:right;padding:15px 0 25px 0'
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :pager-count="5"
            :page-size='pageSize'
            :page-sizes="[10, 25, 50, 100]"
            layout="total, sizes, prev, pager, next"
            :total='totalLength'
            v-if="operationType !== 'edit' && operationType !== 'add' && totalLength" >
            </el-pagination>
          </div>
        </div>
      </el-form>
    </div>
    <Edit-Parameters :editInfo = 'editInfo' :showEditDialog = 'showEditDialog' @giveUp='showEditDialog = false' @sureEdit='sureEdit'></Edit-Parameters>
  </div>
</template>

<script src='./eventDefine.js'></script>
